<template>
  <div id="app" >
    <loading v-if="isLoading"></loading>
    <transition :name="routerAni">
      <router-view class="router-view"></router-view>
    </transition>
    <background></background>
  </div>
</template>

<script>
// import Loader from 'resource-loader'
import loading from '@/components/loading'
import background from '@/components/background'
import welcome from '@/components/welcome'
import { mapState } from 'vuex'
import { getQueryString } from '@/assets/js/common'

export default {
  name: 'app',
  data () {
    return {
      wxUserInfo: null,
      maokuUserInfo: null
    }
  },
  components: {
    loading,
    background,
    welcome
  },
  computed: {
    ...mapState(['isLoading', 'routerAni', 'processIndex', 'userInfo', 'activityGuid'])
  },
  mounted () {
    // console.log(this.$route)
    if (this.$route.path === '/screen') return
    if (this.$route.path === '/preview') return
    this.initUserInfo(() => {
      this.ledscreenUserRegister(() => {
        this.ledscreenUserGet()
      })
    })
  },
  methods: {
    // 获取用户信息
    ledscreenUserGet () {
      this.$http({
        url: `${this.$config.baseUrl}/api/api?ifname=ledscreen.user.get`,
        method: 'post',
        data: {
          ...this.userInfo,
          activity_guid: this.activityGuid
        }
      }).then(res => {
        if (+res.status === 1) {
          this.$store.commit('userInfo', res.data)
        }
      })
    },
    // 注册
    ledscreenUserRegister (cb) {
      let openidInvite = getQueryString('openid_invite') || this.$route.query.openid_invite
      console.log('来源openid', openidInvite)
      if (openidInvite === this.userInfo.openid) {
        openidInvite = ''
      }
      this.$http({
        url: `${this.$config.baseUrl}/api/api?ifname=ledscreen.user.register`,
        method: 'post',
        data: {
          ...this.userInfo,
          activity_guid: this.activityGuid,
          openid_invite: openidInvite
        }
      }).then(res => {
        if (+res.status === 1) {
          cb()
        }
      })
    },
    initUserInfo (cb) {
      let code = getQueryString('code')
      let { link } = this.$config.wx
      if (this.userInfo) {
        cb()
      } else {
        if (code) {
          this.getWxUserInfo(wxUserInfo => {
            this.wxUserInfo = wxUserInfo
            this.$store.commit('userInfo', wxUserInfo)
            cb()
          })
        } else {
          window.location.href = link
        }
      }
    },
    getWxUserInfo (cb) {
      let code = getQueryString('code')
      let state = getQueryString('state')
      console.log('获取微信个人信息')
      this.$http({
        url: `/com/get_userinfo_by_code`,
        data: {
          appid: this.$config.wx.appId,
          code,
          state
        }
      }).then(res => {
        console.log(res)
        if (+res.status === 1) {
          cb(res.data.userinfo)
        }
      })
    }
  }
}
</script>

<style lang="scss">
@import './assets/css/config';
#app{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}
.router-view{
  position:absolute;
  z-index:2;
  left:0;
  top:0;
  width:100%;
  height:100%;
  // transition: opacity .5s, transform .3s cubic-bezier(0.25,0.1,0.25,1);
}
.slide-left-enter{
  opacity:.5;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity:0;
  transform: translate3d(-33%, 0, 0);
}
.slide-right-enter {
  opacity:.5;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity:0;
  transform: translate3d(33%, 0, 0);
}
</style>
